<template>
  <div class="backPwd">
    <div class="pageTitle">
      找回密码
    </div>
    <div class="pageSteps">
      <el-steps :active="active" align-center finish-status="success">
        <el-step
          v-for="(item,index) in pages"
          :key="index"
          :title="item.title"></el-step>
      </el-steps>
    </div>
    <div class="pageMain">
      <component :is="componentName" :name="componentName"></component>
    </div>
  </div>
</template>

<script>
  import phone from './module/phone.vue'
  import password from './module/password.vue'
  import result from './module/result.vue'
  export default {
    name: "backPwd",  // 找回密码
    data() {
      return {
        active: 0,
        componentName: 'phone',
        pages: [
          { index: 0, title: '验证手机号', component: 'phone' },
          { index: 1, title: '填写密码', component: 'password' },
          { index: 2, title: '完成', component: 'result' }
        ]
      }
    },
    components: {
      phone,
      password,
      result,
    },
    created() {

    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  .backPwd {
    .pageTitle{
      width: 200px;
      margin: 90px auto 50px;
      font-size: 28px;
      text-align: center;
    }
    .pageSteps{
      width: 600px;
      margin: auto;
      text-align: center;
    }
    .pageMain{
      width: 720px;
      /*border: 1px solid red;*/
      margin: 20px auto;
      padding: 40px 0;
    }
  }
</style>
